<template>
  <div class="slide-animation-panel">
    <div class="animation-pool">
      <div class="animation-item" :class="{ 'active': currentTurningMode === item.value }" v-for="item in animations"
        :key="item.label" @click="updateTurningMode(item.value)">
        <div :class="['animation-block', item.value]"></div>
        <div class="animation-text">{{ item.label }}</div>
      </div>
    </div>
    <Button style="width: 100%;" @click="applyAllSlide()">应用到全部</Button>
    <Divider />
    <div class="flex mb20">
      <div style="flex: 4;">播放间隔时间（毫秒）：</div>
      <InputNumber :min="100" :max="5000" :step="100" :value="switchTime" @change="value => updateSwitchTime(value)"
        style="flex: 3;" />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore, useMainStore } from '@/store'
import { TurningMode } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'

interface Animations {
  label: string;
  value: TurningMode;
}

export default defineComponent({
  name: 'slide-animation-panel',
  setup() {
    const mainStore = useMainStore()
    const slidesStore = useSlidesStore()
    const { slides, currentSlide, slideIndex } = storeToRefs(slidesStore)
    const { switchTime } = storeToRefs(mainStore)
    const currentTurningMode = computed(() => currentSlide.value.turningMode || 'slideY')

    const animations: Animations[] = [
      { label: '无', value: 'no' },
      { label: '淡入淡出', value: 'fade' },
      { label: '左右推移', value: 'slideX' },
      { label: '上下推移', value: 'slideY' },
    ]

    const { addHistorySnapshot } = useHistorySnapshot()
    onUnmounted(() => {
      mainStore.$patch({
        switchTime: 2500
      })
    })
    //
    const updateSwitchTime = (val: number) => {
      mainStore.$patch({
        switchTime: val
      })
      // 设置动画切换时间间隔
      applyAllSlideSwitchTime(val)
    }
    // 修改播放时的切换页面方式
    const updateTurningMode = (mode: TurningMode) => {
      if (mode === currentTurningMode.value) return
      slidesStore.updateSlide({ turningMode: mode })
      addHistorySnapshot()
    }
    // 全部页面切换页面间隔时间
    const applyAllSlideSwitchTime = (time: number) => {
      const newSlides = slides.value.map(slide => {
        return {
          ...slide,
          switchTime: time
        }
      })
      slidesStore.setSlides(newSlides)
      addHistorySnapshot()
    }
    // 将当前页的切换页面方式应用到全部页面
    const applyAllSlide = () => {
      const newSlides = slides.value.map(slide => {
        return {
          ...slide,
          turningMode: currentSlide.value.turningMode,
          // switchTime: currentSlide.value.switchTime
        }
      })
      slidesStore.setSlides(newSlides)
      addHistorySnapshot()
    }

    return {
      currentTurningMode,
      animations,
      updateTurningMode,
      applyAllSlide,
      updateSwitchTime,
      switchTime,
      applyAllSlideSwitchTime
    }
  },
})
</script>

<style lang="scss" scoped>
.mb20 {
  margin-bottom: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.animation-pool {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  justify-content: space-between;
}

.animation-item {
  height: 115px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 25px 25px 15px 25px;
  width: calc(50% - 5px);
  position: relative;
  margin: 0 0 10px 0;
  cursor: pointer;
  background: $buttonbg;

  &.active {
    border-color: $themeColor;
    z-index: 1;
    color: $color3e9bff;
    background: $textHoverColor;
  }

  &:nth-child(2n) {
    margin-left: -1px;
  }

  &:nth-child(n+3) {
    margin-top: -1px;
  }
}

.animation-block {
  width: 64px;
  height: 36px;
  background: #666;
  position: relative;
  overflow: hidden;

  @mixin elAnimation($animationType) {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #d9dadb;
    animation: $animationType $transitionDelaySlow linear;
  }

  &.fade:hover {
    &::after {
      @include elAnimation(fade);
    }
  }

  &.slideX:hover {
    &::after {
      @include elAnimation(slideX);
    }
  }

  &.slideY:hover {
    &::after {
      @include elAnimation(slideY);
    }
  }
}

.animation-text {
  font-size: 12px;
  text-align: center;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes slideX {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideY {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>